<template>
  <DialogBox
    :visible="boxVisibility"
    @update:visible="boxVisibility = $event"
    resize
    title="各款捆条参考用量"
    width="80%"
    :close-on-click-modal="false"
  >
    <Grid
      ref="gridRef"
      :fetch-data="fetchData"
      border
      header-align="center"
      align="center"
      height="auto"
      auto-resize
      seq-serial
      :pager="pagerConfig"
    >
      <template #toolbar>
        <GridToolbar>
          <div style="display: flex;">
            <div style="margin: 0 10px;display: flex; width: 160px;">
              <Input v-model="spu" placeholder="款号"  clearable />
            </div>
            <Button type="primary" style="margin-left: 10px;" @click="buttonClickEvent('search')">查询</Button>
            <Button type="primary" style="margin-left: 10px;" @click="buttonClickEvent('reset')">重置</Button>
            <FileUpload
                ref="uploadRef"
                :http-request="httpRequest"
                :file-list="fileList"
                accept=".xlsx"
                :show-file-list="false"
                style="margin-left: 10px;"
              >
                <template #trigger>
                  <Button type="primary">上传</Button>
                </template>
              </FileUpload>
              <div v-if="upload_time" class="uploadTime">上传时间： {{ upload_time }}</div>
          </div>
        </GridToolbar>
      </template>
      <GridColumn type="index" width="50"></GridColumn>
      <GridColumn field="store" title="店铺" min-width="120" show-icon></GridColumn>
      <GridColumn field="spu" title="款号" min-width="120" show-icon></GridColumn>
      <GridColumn field="material_classification" title="物料分类" min-width="120" show-icon></GridColumn>
      <GridColumn field="material_name" title="物料名称" min-width="120" show-icon></GridColumn>
      <GridColumn field="pre_cutting_quantity_bulk_goods" title="大货预裁用量" min-width="120" show-icon></GridColumn>
      <GridColumn field="usage_bundling_strips" title="捆条用量" min-width="120" show-icon></GridColumn>
      <GridColumn field="discharge_utilization_rate" title="排料利用率（%）" min-width="120" show-icon></GridColumn>
    </Grid>
    <template #footer>
      <Button type="primary" @click="boxVisibility = false"> 关闭 </Button>
    </template>
  </DialogBox>
</template>

<script setup>
import { Button, DialogBox, Grid, GridColumn, GridToolbar, FileUpload, Input, Modal } from '@opentiny/vue'
import { getSpuBundleUsage, uploadSpuBundleUsage } from '@/request/api'
import { ref, watch } from 'vue'

const boxVisibility = ref(false)
const pagerConfig = ref({
  attrs: {
    currentPage: 1,
    pageSize: 10,
    pageSizes: [10, 20, 30, 50, 100],
    total: 0,
    align: 'right',
    layout: 'total, prev, pager, next, jumper, sizes'
  }
})
const upload_time = ref('')
const gridRef = ref()
const spu = ref('')
const getData = ({ page }) => {
  const currentPage = page.currentPage
  const size = page.pageSize
  const params = {
    page: currentPage,
    size,
    spu: spu.value,
  }
  return new Promise((resolve) => {
    getSpuBundleUsage(params).then(res => {
      if (res?.data?.ret === 0) {
        upload_time.value = res.data.upload_time
        resolve({
          result: res.data.result,
          page: { total: res.data.total }
        })
      }
    })
  })
}
const fileList = ref([])
const httpRequest = (files) => {
  const formData = new FormData()
  formData.append('file', files.file)
  uploadSpuBundleUsage(formData).then(res => {
    if (res?.data?.ret === 0) {
      Modal.message({ message: '上传成功', status: 'success' })
    } else {
      Modal.message({ message: '上传失败', status: 'error' })
    }
  }).catch(() => {
    Modal.message({ message: '上传失败', status: 'error' })
  })
}
const buttonClickEvent = (typ) => {
  switch (typ) {
    case 'search': {
      gridRef.value.pagerConfig.currentPage = 1
      gridRef.value.handleFetch()
      break
    }
    case 'reset': {
      gridRef.value.pagerConfig.currentPage = 1
      spu.value = ''
      gridRef.value.handleFetch()
      break
    }
  }
}
const fetchData = {
  api: getData
}

defineExpose({
  boxVisibility
})
watch(boxVisibility, (val) => {
  if (val) {
    gridRef.value.handleFetch()
  }
})
</script>
<style lang="scss" scoped>
  .uploadTime {
    position: absolute;
    right: 0;
    line-height: 60px;
    color: red;
    font-size: 16px;
  }
</style>